<script setup>
import Codemirror from "codemirror-editor-vue3"
import "codemirror/mode/sql/sql"
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  currRow: Object,
})

const currRow = ref(props.currRow)
const execVisible = ref(true)
const sourceSql = ref('SELECT 1')
const smBeanName = ref(currRow.value.smBeanName)
const returnVal = ref('')
const logStr = ref('')

const execOper = async () => {
  const res = await $ivyApi.post(API_URLS.dbSqlManagerExec,{
    sourceSql: sourceSql.value,
    smBeanName: smBeanName.value,
  })
  if(res.code != 200){
    showMsg(res)
    returnVal.value = ''
    logStr.value = res.message
    return
  }
  returnVal.value = res.data.returnVal
  logStr.value = res.data.logStr
}

// 代码编辑器
const cmRef = ref()

const cmOptions = {
  mode: "text/x-sql",
}

const logRef = ref()

const logOptions = {
  mode: "log",
  readOnly: true,
  theme: "default",
}

const onChange = (val, cm) => {
  //console.log(val)
  //console.log(cm.getValue())
}

const onInput = val => {
  //console.log(val)
}

const onReady = cm => {
  //console.log(cm.focus())
}

onMounted(() => {
  setTimeout(() => {
    cmRef.value?.refresh()
    logRef.value?.refresh()
  }, 1000)
})

onUnmounted(() => {
  cmRef.value?.destroy()
  logRef.value?.destroy()
})

// 回调信息
const snackbar = reactive(API_URLS.resultMsg)

const showMsg = res => {
  $resultMsg.show(res,snackbar)
}
</script>

<template>
  <VDialog
    v-model="execVisible"
    persistent
    max-width="800"
    min-width="600"
    width="auto"
  >
    <VSnackbar
      v-model="snackbar.msgVisible"
      location="top"
      :color="snackbar.msgColor"
    >
      {{ snackbar.msgContent }}
    </VSnackbar>
    <DialogCloseBtn @click="execVisible = !execVisible" />
    <VCard title="调试">
      <VCardText>
        <VRow class="exec-mt">
          <VCol cols="12">
            <span>使用的SQLManager： {{ currRow.smBeanName }} ({{ currRow.smName }}) </span>
          </VCol>
        </VRow> 
       
        <Codemirror
          ref="cmRef"
          v-model:value="sourceSql"
          :options="cmOptions"
          border
          height="150"
          width="100%"
          @change="onChange"
          @input="onInput"
          @ready="onReady"
        />

        <VRow class="exec-mt">
          <VCol cols="12">
            <span>执行日志： </span>
            <Codemirror
              ref="logRef"
              v-model:value="logStr"
              :options="logOptions"
              border
              height="240"
              width="100%"
            />
          </VCol>
        </VRow> 
      </VCardText>

      <VCardText class="d-flex justify-end gap-3 flex-wrap">
        <VBtn
          color="secondary"
          variant="tonal"
          @click="execVisible = false"
        >
          关闭
        </VBtn>
        <VBtn @click="execOper">
          执行
        </VBtn>
      </VCardText>
    </VCard>
  </VDialog>
</template>

<style scoped>
.w-100 {
  inline-size: 100%;
}

.exec-mt {
  margin-block-end: 4px;
}
</style>
